<template>
	<gracePage statusBarBG="#EB5D4B" :customHeader="false">
		<view slot="gBody">
			<view class="order-status grace-flex grace-rows grace-flex-vcenter grace-space-between">
				<text v-if="orderData.order_status_id == 15">买家已付款</text>
				<text v-if="orderData.order_status_id == 17">等待买家付款</text>
				<text v-if="orderData.order_status_id == 18">卖家已发货</text>
				<text v-if="orderData.order_status_id == 19">交易成功</text>
				<text class="iconfont icon-yifukuan" v-if="orderData.order_status_id == 15"></text>
				<text class="iconfont icon-daifukuan" v-if="orderData.order_status_id == 17"></text>
				<text class="iconfont icon-yifahuo" v-if="orderData.order_status_id == 18"></text>
				<text class="iconfont icon-jiaoyichenggong" v-if="orderData.order_status_id == 19"></text>
			</view>
			<view class="addressInfo grace-flex grace-rows grace-flex-vcenter">
				<text class="iconfont icon-dingwei"></text>
				<text>{{orderData.province}}-{{orderData.city}}-{{orderData.cityarea}}-{{orderData.shopaddr}}{{orderData.shopname}}</text>
			</view>
			<view class="grace-padding">
				<view class="grace-shoppingcard grace-border-b" v-for="(goods, index) in orderData.orderproductlist" :key="index">
					<view class="grace-shoppingcard-goods">
						<image :src="gRequest.apiUrlImages + goods.image" class="grace-shoppingcard-goods-image" mode="aspectFill"></image>
						<view class="grace-shoppingcard-goods-body">
							<view class="grace-shoppingcard-goods-title">{{ goods.name }}</view>
							<view class="grace-space-between grace-flex-vcenter">
								<text class="grace-shoppingcard-goods-price" v-if="is_jifen_order==1">{{ goods.price }}积分</text>
								<text class="grace-shoppingcard-goods-price" v-else>￥{{ goods.price }}</text>
								<view class="grace-shoppingcard-goods-number">X{{ goods.quantity }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="other-info grace-flex grace-rows grace-flex-vcenter grace-space-between">
					<text>商品总价</text>
					<text>￥{{ orderData.total }}</text>
				</view>
				<view class="other-info grace-flex grace-rows grace-flex-vcenter grace-space-between">
					<text>运费</text>
					<text v-if="freight == 0">快递 免邮</text>
					<text v-else>￥{{ freight }}</text>
				</view>
				<view class="other-info grace-flex grace-rows grace-flex-vcenter grace-space-between">
					<text>订单编号</text>
					<text>{{ orderData.order_id }}</text>
				</view>
				<view class="other-info grace-flex grace-rows grace-flex-vcenter grace-space-between">
					<text>下单时间</text>
					<text>{{ orderData.date_added }}</text>
				</view>
				<view
					class="other-info grace-flex grace-rows grace-flex-vcenter grace-space-between"
					v-for="(item, index) in orderData.deliverylist"
					v-if="orderData.order_status_id == 18 || orderData.order_status_id == 19"
					:key="index+item.delivery_num"
				>
					<text>快递单号{{ index + 1 }}</text>
					<text>{{ item.name }}/{{ item.delivery_num }}</text>
				</view>

				<view class="paylist clearfix" style="margin-top: 20rpx;" v-if="orderData.order_status_id == 17">
					<view class="grace-flex grace-rows grace-flex-vcenter grace-border-b" style="height: 90rpx;" @tap="changePay('wxpay')">
						<view class="iconfont icon-weixinzhifu" style="color: #3FCF77;font-size: 60rpx;"></view>
						<view style="color: #666666;font-size: 28rpx;margin-left: 10rpx;">微信支付</view>
						<view class="iconfont icon-xuanzhong" v-if="payment_method=='wxpay'" style="color:#FD815F;margin-left: auto;font-size: 40rpx;margin-right: 20rpx;"></view>
					</view>
					<view class="grace-flex grace-rows grace-flex-vcenter" style="height: 90rpx;" @tap="changePay('alipay')">
						<view class="iconfont icon-zhifubaozhifu" style="color: #02A9F1;font-size: 60rpx;"></view>
						<view style="color: #666666;font-size: 28rpx;margin-left: 10rpx;">支付宝</view>
						<view class="iconfont icon-xuanzhong" v-if="payment_method=='alipay'" style="color:#FD815F;margin-left: auto;font-size: 40rpx;margin-right: 20rpx;"></view>
					</view>
				</view>
				<view
					class="grace-nowrap grace-flex-vcenter grace-border-t"
					style="background-color:#FFFFFF;position: fixed;left: 0;bottom: 0rpx;width: 100%;"
					v-if="orderData.order_status_id == 17"
				>
					<view class="grace-shoppingcard-count grace-nowrap grace-flex-vcenter grace-flex-end">
						<text class="grace-text">总计 :</text>
						<text style="font-size:32rpx; color:#FD815F;margin-right: 20rpx;">￥{{ orderData.total }}</text>
					</view>
					<view class="grace-shoppingcard-checkout" style="background:linear-gradient(268deg,rgba(235,93,75,1),rgba(253,129,95,1));color: #FFFFFF;" @tap="toPay">确认支付</view>
				</view>
				<button v-if="orderData.order_status_id == 19" @tap="goEvaluate" class="grace-button grace-border-radius login-btn">去评价</button>
				<button v-if="orderData.order_status_id == 18" @tap="confirmOrder" class="grace-button grace-border-radius login-btn">确认收货</button>
			</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '../../graceUI/components/gracePage.vue';
export default {
	data() {
		return {
			orderData: {
				orderproductlist: [],
				addressinfo: [],
				deliverylist: []
			},
			freight: 0,
			wxenable: true,
			alienable: true,
			wxActive: true,
			aliActive: false,
			payment_method: "wxpay",
			order_id:"",
		};
	},
	onReady: function() {},
	onLoad: function(option) {
		this.order_id = option.id
		this.getData();
	},
	methods: {
		confirmOrder(){
			this.gRequest.get(
				'/orders/confirmreceipt',
				{
					member_id: JSON.parse(uni.getStorageSync('userInfo')).member_id,
					order_id: this.order_id
				},
				res => {
					uni.showToast({
						title: '收货成功',
						'icon': 'none'
					})
					this.getData()
				}
			);
		},
		toPay() {
			if (this.payment_method == 'wxpay') {
				this.gRequest.post("/wxpay/goodsPayApi", {
					member_id: JSON.parse(uni.getStorageSync("userInfo")).member_id,
					order_id: this.order_id
				}, 'form', {}, res => {
					if (res.status == 1) {
						uni.requestPayment({
							provider: "wxpay",
							orderInfo: res.data, //微信、支付宝订单数据
							success: (res) => {
								uni.redirectTo({ url: '../myorders/myorders' });
							},
							fail: (err) => {
								uni.showToast({
									title: '支付失败',
									'icon': 'none'
								})
							}
						})
					}
				});
			} else if (this.payment_method == 'alipay') {
				this.gRequest.post("/alipay/toalipay", {
					member_id: JSON.parse(uni.getStorageSync("userInfo")).member_id,
					order_id: this.order_id
				}, 'form', {}, res => {
					console.log(res)
					if (res.status == 1) {
						uni.requestPayment({
							provider: "alipay",
							orderInfo: res.data, //微信、支付宝订单数据
							success: (res) => {
								uni.redirectTo({ url: '../myorders/myorders' });
							},
							fail: (err) => {
								uni.showToast({
									title: '支付失败',
									'icon': 'none'
								})
							}
						})
					}
				});
			} else {
				Toast("支付成功")
			}
		},
		goEvaluate:function(){
			uni.navigateTo({
				url:"../myorders/orderEvaluate?order_id="+this.orderData.order_id+"&product_id="+this.orderData.orderproductlist[0].product_id,
			})
		},
		getData: function() {
			this.gRequest.get(
				'/orders/getorderdetail',
				{
					member_id: JSON.parse(uni.getStorageSync('userInfo')).member_id,
					order_id: this.order_id
				},
				res => {
					this.orderData = res.data;
				}
			);
			this.gRequest.get(
				'/orders/getordershipping',
				{
					order_id: this.order_id
				},
				res => {
					this.freight = res.data.shipping;
				}
			);
		},
		changePay(type) {
			this.payment_method = type;
		},
		changeItem(item) {
			this.priceObj = item;
			this.price = '';
		},
		priceInput(e) {
			this.priceObj = {
				cid: '-1'
			};
			this.price = e.target.value;
		},
	},
	components: { gracePage }
};
</script>
<style lang="scss">
.order-status {
	height: 160rpx;
	background-color: #eb5d4b;
	width: 100%;
	text {
		&:nth-child(1) {
			margin-left: 80rpx;
			font-size: 30rpx;
			color: #ffffff;
		}
		&:nth-child(2) {
			margin-right: 80rpx;
			font-size: 80rpx;
			color: #ffffff;
		}
	}
}
.addressInfo {
	height: 80rpx;
	width: 100%;
	text {
		&:nth-child(1) {
			margin-left: 30rpx;
			font-size: 48rpx;
			color: rgb(235, 93, 75);
		}
		&:nth-child(2) {
			margin-left: 20rpx;
			font-size: 30rpx;
			color: #666666;
		}
	}
}
.other-info {
	margin-bottom: 20rpx;
	font-size: 28rpx;
	text {
		&:nth-child(1) {
			margin-left: 30rpx;
			color: #999999;
		}
		&:nth-child(2) {
			margin-right: 30rpx;
			color: #333333;
		}
	}
}
.grace-shoppingcard {
	background: #ffffff;
	border-radius: 8rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}
.grace-shopp-name {
	width: 500rpx;
}
.grace-shopp-go {
	width: 120rpx;
}
.grace-shoppingcard-goods {
	margin: 10rpx 0;
	display: flex;
	flex-wrap: nowrap;
}
.grace-shoppingcard-goods-checkbtn {
	width: 60rpx;
	flex-shrink: 0;
}
.grace-shoppingcard-goods-image {
	width: 150rpx;
	height: 150rpx;
	margin-right: 20rpx;
	flex-shrink: 0;
}
.grace-shoppingcard-goods-body {
	width: 100%;
}
.grace-shoppingcard-goods-title {
	line-height: 1.4em;
}
.grace-shoppingcard-goods-price {
	color: #eb5d4b;
	font-size: 32rpx;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}
.grace-shoppingcard-goods-number {
	margin-right: 30rpx;
	color: #eb5d4b;
	font-size: 30rpx;
}
.grace-shoppingcard-remove {
	display: block;
	text-align: right;
	line-height: 50rpx;
	margin-top: 30rpx;
	color: #cccccc;
	font-size: 24rpx;
}
.grace-shoppingcard-checkbtn {
	width: 200rpx;
	margin-left: 50rpx;
	flex-shrink: 0;
}
.grace-shoppingcard-count {
	width: 600rpx;
}
.grace-shoppingcard-checkout {
	width: 280rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-size: 28rpx;
	text-align: center;
	flex-shrink: 0;
}

.login-btn {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 80rpx;
	text-align: center;
	line-height: 80rpx;
	border: 2rpx solid rgba(181, 181, 181, 0);
	color: #ffffff;
	background: #eb5d4b;
	font-size: 28rpx;
	border-radius: 0;
}
</style>
